﻿<!-- Slider start-->
<div id="slide-wrapper">
    <div id="banner" data-bind="foreach: cars">
        <div class="oneByOne_item">
            <img data-bind="attr: { src: image()[0].imageName }" alt="Placeholder" class="bigImage" />
            <span class="slide5Txt1" data-animate="fadeInLeftBig" data-bind="text: name()"></span>
            <span class="slide5Txt2" data-animate="fadeInRightBig" data-bind="text: priceFormated()"></span>
        </div>
    </div>
</div>
<!-- end slider -->

<div class="body-text">

    <div class="container-fluid">

        <div class="row-fluid">

            <!--west pane span9-->
            <div class="span9">
                <div class="row-fluid">
                    <h1><a class="car-category" href="#/carlists/latest/menu-all/all">Latest Cars</a></h1>
                </div>
                <div class="row-fluid hotproperties" data-bind="foreach: latestCars">
                    <div class="span4 set-equal-heights-js">
                        <div class="thumbnail car-thumbnails">
                            <a>
                                <img data-bind="attr: { src: image()[0].imageName }" alt="Placeholder" class="thumbnail" />
                            </a>
                            <div class="caption">
                                <a href="property.html" class="prop-title" data-bind="text: name">Property Name, Toronto ON</a>
                                <p class="size">Bed: 5 • Bath: 2 • Park 2</p>
                                <p class="price" data-bind="text: priceFormated">$259,000</p>
                                <p class="description">
                                    Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. 
                               
                                </p>
                                <ul class="list-btns">
                                    <li><a href="property.html"><i class="icon-info-sign"></i>View Details</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <h1>Peach Realestate Blog</h1>
                <p class="body-paragraph">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
                        Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
	
                        Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, 
                        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                       
                        <span class="signature">Yours truly - Mr Bootstrap
                            <br />
                            Administrator / Realtor</span>
                </p>

            </div>
            <!--end of west pane span9-->

            <!--east pane with width of span3-->
            <div class="span3">
                <!--
                    "Quick Search" Widget
								
                    SPECIAL NOTE: Please leave the inline style for <Select></Select> "width:100%",
                    the width is automatically "Re-adjusted" with javascript
                    See "config.js" for more details	
                    -->
                <div class="qbox">
                    <h3><i class="icon-search pull-right"></i>Quick Search</h3>
                    <form />
                    <div>
                        <label>Brand</label>
                        <select data-placeholder="-- Select Brand --" class="chzn-select" style="width: 100%;" tabindex="0">
                            <option value="1">bmw</option>
                            <option value="2">honda</option>
                            <option value="3">nissan</option>
                            <option value="4">mitsubishi</option>
                            <option value="4">kia</option>
                        </select>
                    </div>
                    <div>
                        <label>Model</label>
                        <select data-placeholder="-- Select Model --" class="chzn-select" style="width: 100%;" tabindex="0">
                            <option value="1">Model 1</option>
                            <option value="2">Model 2</option>
                            <option value="3">Model 3</option>
                        </select>
                    </div>
                    <div>
                        <label>Year</label>
                        <select data-placeholder="-- Select Year --" multiple="multiple" class="chzn-select" style="width: 100%;" tabindex="2">
                            <option value="1995">1995</option>
                            <option value="1996">1996</option>
                            <option value="1997">1997</option>
                            <option value="1998">1998</option>
                            <option value="1999">1999</option>
                            <option value="2000">2000</option>
                            <option value="2001">2001</option>
                            <option value="2002">2002</option>
                            <option value="2003">2003</option>
                            <option value="2004">2004</option>
                            <option value="2005">2005</option>
                            <option value="2006">2006</option>
                            <option value="2007">2007</option>
                            <option value="2008">2008</option>
                            <option value="2009">2009</option>
                            <option value="2010">2010</option>
                            <option value="2011">2011</option>
                            <option value="2012">2012</option>
                            <option value="2013">2013</option>
                        </select>
                    </div>
                    
                    <button class="btn btn-inverse btn-small">Search</button>

                </div>

                <!-- Start Zone Alert -->
                <div class="qbox">
                    <h3><i class="icon-eye-open pull-right"></i>Zone Alert</h3>
                    <div>
                        <p>Register your criteria and Property Alert will let you know when properties are listed.</p>
                        <a data-toggle="modal" href="#myModal" class="btn btn-small">Register</a>
                    </div>

                </div>
                <!-- end Zone Alert -->
            </div>
            <!--end of span3-->
        </div>
    </div>
</div>
